import React from 'react';
import { Modal, Tabs, Button, Upload, Input, Select } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

const { TabPane } = Tabs;
const { TextArea } = Input;
const { Option } = Select;

const ImportModal = ({ visible, onClose }) => {
  return (
    <Modal
      title="Import Prompts"
      visible={visible}
      onCancel={onClose}
      footer={[
        <Button key="back" onClick={onClose}>
          Cancel
        </Button>,
        <Button key="submit" type="primary">
          Import
        </Button>,
      ]}
    >
      <Tabs defaultActiveKey="1">
        <TabPane tab="Text Import" key="1">
          <TextArea rows={6} placeholder="Paste your prompt content..." />
          <div style={{ marginTop: 16 }}>
            <span>Save to folder: </span>
            <Select defaultValue="writing" style={{ width: 120 }}>
              <Option value="writing">Writing</Option>
              <Option value="editing">Editing</Option>
              <Option value="design">Design</Option>
            </Select>
          </div>
        </TabPane>
        <TabPane tab="File Import" key="2">
          <Upload.Dragger>
            <p className="ant-upload-drag-icon">
              <UploadOutlined />
            </p>
            <p className="ant-upload-text">Click or drag file to upload</p>
            <p className="ant-upload-hint">Supports TXT, JSON, MD files</p>
          </Upload.Dragger>
          <div style={{ marginTop: 16 }}>
            <span>Save to folder: </span>
            <Select defaultValue="writing" style={{ width: 120 }}>
              <Option value="writing">Writing</Option>
              <Option value="editing">Editing</Option>
              <Option value="design">Design</Option>
            </Select>
          </div>
        </TabPane>
        <TabPane tab="Share Code Import" key="3">
          <Input placeholder="Enter share code" />
          <div style={{ marginTop: 16 }}>
            <span>Save to folder: </span>
            <Select defaultValue="writing" style={{ width: 120 }}>
              <Option value="writing">Writing</Option>
              <Option value="editing">Editing</Option>
              <Option value="design">Design</Option>
            </Select>
          </div>
        </TabPane>
      </Tabs>
    </Modal>
  );
};

export default ImportModal;
